<template>
  <div>
    <Form
      oneitem="设备编号"
      :select-show="false"
      :add-click-show="false"
      :search-list="vmList"
      :total-count="totalCount"
      :total-page="totalPage"
      :page-index="pageIndex"
      @changeList="changeList"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column prop="date" label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="innerCode" label="设备编号" width="240" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.addr" label="详细地址" />
        <el-table-column prop="ownerName" label="运营状态" />
        <el-table-column prop="status" label="设备状态" width="300">
          <template>
            <!-- <span v-for="(item,index) in scoped.row.status" :key="index">
              {{ item }}
            </span> -->
            <div style="display:flex">
              <div class="success offline-danger">离线</div>
              <div class="success">货道</div>
              <div class="success">转动轴</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="infoShowFn(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <el-dialog title="设备详情" :visible.sync="dialogVisible" width="630px">
      <el-row class="header">
        <el-col :span="6"> 销售量：<span>{{ orderCout }}个</span></el-col>
        <el-col :span="6">销售额：<span>{{ orderAmount }}万元</span></el-col>
        <el-col :span="6">补货次数：<span>{{ repairCount }}次</span></el-col>
        <el-col :span="6">维修次数：<span>{{ supplyCount }}次</span></el-col>
      </el-row>
      <div style="margin: 20px 0 12px 6px;">
        商品销量（月）
      </div>
      <el-row class="skuCol">
        <el-col v-for="(item,index) in skuCollect" :key="index" :span="6" class="skuItem">
          <el-row>
            <el-col :span="14" class="skuName">{{ item.skuName }}</el-col>
            <el-col :span="10">：{{ item.count }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { vmList, indexMethod, changeList, searchResultFn } from './compoments/common.js'
import { orderAmount, orderCout, repairCount, supplyCount, skuCollect } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      vmList: [],
      pageIndex: 1,
      totalPage: null,
      totalCount: null,
      dialogVisible: false,
      vmInfo: null,
      orderAmount: null,
      orderCout: null,
      repairCount: null,
      supplyCount: null,
      skuCollect: null
    }
  },
  async created() {
    const res = await vmList(this.pageIndex)
    console.log(res.currentPageRecords)
    this.totalPage = res.totalPage
    this.totalCount = res.totalCount
    this.vmList = res.currentPageRecords
  },
  methods: {
    indexMethod(index) {
      return indexMethod(this.pageIndex, index)
    },
    async changeList(page) {
      this.pageIndex = page
      const res = await changeList(this.pageIndex, page)
      this.vmList = res.currentPageRecords
    },
    async searchResultFn(val) {
      const res = await searchResultFn(val.taskCode)
      this.vmList = res.currentPageRecords
    },
    async infoShowFn(row) {
      this.dialogVisible = true
      console.log(row.innerCode)
      // 销售额
      const res = await orderAmount({
        innerCode: row.innerCode,
        start: `${this.$store.getters.startTime} 00:00:00`,
        end: `${this.$store.getters.endTime} 23:59:59`
      })
      this.orderAmount = (res.data / 1000000).toFixed(2)
      // 销售总量
      const res1 = await orderCout({
        innerCode: row.innerCode,
        start: `${this.$store.getters.startTime} 00:00:00`,
        end: `${this.$store.getters.endTime} 23:59:59`
      })
      this.orderCout = res1.data
      // 维修
      const res2 = await repairCount(
        row.innerCode,
        `${this.$store.getters.startTime}`,
        `${this.$store.getters.endTime}`
      )
      this.repairCount = res2.data
      // 补货
      const res3 = await supplyCount(
        row.innerCode,
        `${this.$store.getters.startTime}`,
        `${this.$store.getters.endTime}`
      )
      this.supplyCount = res3.data
      // 商品销量
      const res4 = await skuCollect(
        row.innerCode,
        `${this.$store.getters.startTime}`,
        `${this.$store.getters.endTime}`
      )
      this.skuCollect = res4.data
      console.log(this.skuCollect)
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  height: 23px;
  padding: 0 12px;
  background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
  border-radius: 14px;
  text-align: center;
  color: #fff;
  line-height: 23px;
  margin-right: 10px;
}

.offline-danger {
  background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
}

.header {
  height: 54px;
  line-height: 54px;
  text-align: center;
  background: rgba(227, 233, 245, .39);

  span {
    color: #5f84ff;
  }
}
.skuCol{
  border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
    .skuItem{
      padding: 0 10px;
        line-height: 40px;
        border-radius: 0;
        border-right: 1px solid #d8dde3;
        border-bottom: 1px solid #d8dde3;
      .skuName{
        overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
    }
}
</style>
